<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="js/vendor/d3.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
	(function () {
		var dataArray = getRandomData();
		var canvasHeight = 280;
		var canvasWidth = 600;

		var svg = d3
			.select("body")
			.append("svg")
			.attr("height", canvasHeight)
			.attr("width", canvasWidth);

		svg.append("rect").attr("fill", "#cccccc").attr("width", canvasWidth).attr("height", canvasHeight);

		var canvas = svg.append("g").attr("transform", "translate(200,150)");

		var arc = d3.svg.arc().innerRadius(100).outerRadius(130);

		var dataInPieLayout = d3.layout.pie().value(function (d) {
			return d;
		})

		var color = d3.scale.linear().domain(d3.extent(dataArray)).range(["black", "green"]);

		var arcs = canvas.selectAll(".arc")
			.data(dataInPieLayout(dataArray))
			.enter()
			.append("g")
			.attr("class", "arc");

		arcs.append("path")
			.attr("d", arc)
			.attr("fill", function (d) {
				return color(d.data)
			});

		arcs.append("text")
			.attr("transform", function (d) {
				return "translate(" + arc.centroid(d) + ")";
			})
			.text(function (d) {
				return d.data;
			})
			.attr("text-anchor", "middle")
			.attr("font-size", "10px")
			.attr("font-family", "Arial")
			.attr("fill", "#fff");

		function getRandomData() {
			var d = [];
			for (var n = 0; n < 20; n++) {
				d[d.length] = Math.floor(Math.random() * n) + 5;
			}
			return d;
		}
	}());
</script>
</body>
</html>